<template>
  <page-meta root-font-size="52px">
    <view class="detail-container" v-if="articleData">
      <!-- 文章内容区 -->
      <block>
        <!-- 标题 -->
        <view class="title">{{ articleData.articleTitles }}</view>
        <!-- 作者信息 -->
        <view class="detail-info">
          <view class="detail-left">
            <view class="avatar-box">
              <!-- 头像 -->
              <image class="avatar" :src="articleData.avatar" />
            </view>
            <view class="author-box">
              <!-- 作者 -->
              <text class="author">{{ articleData.nickName }}</text>
              <!-- 发布时间 -->
              <text class="release-time">{{ articleData.date }}</text>
            </view>
          </view>
          <view class="detail-right">
            <!-- 关注按钮 -->
            <button
              class="follow"
              size="mini"
              @click="onFollowClick"
              :loading="isFollowLoading"
              :type="articleData.isFollow ? 'primary' : 'default'"
            >
              {{ articleData.isFollow ? "已关注" : "关注" }}
            </button>
          </view>
        </view>
        <!-- 文章内容 -->
        <mp-html
          class="markdown_views"
          :content="addClassFromHTML(articleData.content)"
          scroll-table
        ></mp-html>
        <!-- 评论列表 -->
        <view class="comment-box">
          <article-comment-list
            :articleId="articleId"
            ref="mescrollItem"
          ></article-comment-list>
        </view>
      </block>
      <!-- 底部功能区 -->
      <article-operate @commitClick="onCommit"></article-operate>
      <uni-popup ref="popup" type="bottom" @change="onCommitPopupChange">
        <article-comment-commit
          v-if="isShowCommit"
          :articleId="articleId"
          @success="onSendSuccess"
        ></article-comment-commit>
      </uni-popup>
    </view>
  </page-meta>
</template>

<script>
import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp";
// 导入组件
import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html";
import { getArticleDetail } from "@/api/article.js";
import { mapActions } from "vuex";
import { userFollow } from "api/user.js";
export default {
  mixins: [MescrollCompMixin],
  components: {
    mpHtml,
  },
  data() {
    return {
      // 作者名
      author: "",
      // 文章id
      articleId: "",
      // 文章详情
      articleData: null,
      // 关注用户的loading
      isFollowLoading: false,
      // popup的显示状态
      isShowCommit: false,
    };
  },
  onLoad(options) {
    this.author = options.author;
    this.articleId = options.articleId;
    this.loadArticleDetail();
  },
  methods: {
    ...mapActions("user", ["isLogin"]),
    // 为所有的DOM增加类名
    addClassFromHTML(info) {
      return info
        .replace(/<p>/gi, '<p class="p-cls">')
        .replace(/<a>/gi, '<a class="a-cls">')
        .replace(/<h1>/gi, '<h1 class="h1-cls">')
        .replace(/<h2>/gi, '<h2 class="h2-cls">')
        .replace(/<h3>/gi, '<h3 class="h3-cls">')
        .replace(/<h4>/gi, '<h4 class="h4-cls">')
        .replace(/<h5>/gi, '<h5 class="h5-cls">')
        .replace(/<h6>/gi, '<h6 class="h6-cls">')
        .replace(/<ul>/gi, '<ul class="ul-cls">')
        .replace(/<li>/gi, '<li class="li-cls">')
        .replace(/<ol>/gi, '<ol class="ol-cls">')
        .replace(/<td>/gi, '<td class="td-cls">')
        .replace(/<th>/gi, '<th class="th-cls">')
        .replace(/<tr>/gi, '<tr class="tr-cls">')
        .replace(/<dl>/gi, '<dl class="dl-cls">')
        .replace(/<dd>/gi, '<dd class="dd-cls">')
        .replace(/<hr>/gi, '<hr class="hr-cls">')
        .replace(/<pre>/gi, '<pre class="pre-cls">')
        .replace(/<strong>/gi, '<strong class="strong-cls">')
        .replace(/<input>/gi, '<input class="input-cls">')
        .replace(/<table>/gi, '<table class="table-cls">')
        .replace(/<details>/gi, '<details class="details-cls">')
        .replace(/<code>/gi, '<code class="code-cls">')
        .replace(/<kbd>/gi, '<kbd class="kbd-cls">')
        .replace(/<summary>/gi, '<summary class="summary-cls">')
        .replace(/<blockquote>/gi, '<blockquote class="blockquote-cls">')
        .replace(/<img/gi, '<img class="img-cls"');
    },
    // 获取文章详情数据
    async loadArticleDetail() {
      // 展示一个加载框
      uni.showLoading({
        title: "加载中",
      });
      const { data: res } = await getArticleDetail({
        author: this.author,
        articleId: this.articleId,
      });
      this.articleData = res.data;
    },
    // 点击关注
    async onFollowClick() {
      const isLogin = await this.isLogin();
      if (!isLogin) {
        // 用户未登录
        return;
      }
      // 关注用户接口
      this.isFollowLoading = true;
      const { data: res } = await userFollow({
        author: this.author,
        isFollow: !this.articleData.isFollow,
      });
      // 修改用户数据
      this.articleData.isFollow = !this.articleData.isFollow;
      // 关闭loading
      this.isFollowLoading = false;
    },
    // 点击发表评论
    onCommit() {
      // 通过调用 popup实例的方法，进行弹出层的弹出
      this.$refs.popup.open();
    },
    // 发布评论的popup切换事件
    onCommitPopupChange(e) {
      // 修改对应的标记，当 popup关闭的时候，为了动画的平顺，进行延迟的处理
      if (e.show) {
        this.isShowCommit = e.show;
      } else {
        setTimeout(() => {
          this.isShowCommit = e.show;
        }, 200);
      }
    },
    // 评论发布成功
    onSendSuccess(data) {
      // 关闭弹出窗
      this.$refs.popup.close();
      this.isShowCommit = false;
      // 为commentList增加数据
      this.$refs.mescrollItem.addCommentList(data);
    },
  },
};
</script>

<style lang="scss">
@import "~@/styles/article-detail.scss";
.detail-container {
  padding: $uni-spacing-col-base $uni-spacing-row-base;
  padding-bottom: 88px;
  .title {
    font-size: $uni-font-size-title;
    color: $uni-text-title;
    font-weight: bold;
  }
  .detail-info {
    padding: $uni-spacing-col-base 0;
    display: flex;
    justify-content: space-between;

    .detail-left {
      display: flex;
      .author-box {
        margin-left: $uni-spacing-row-base;
        display: flex;
        flex-direction: column;
        .author {
          font-size: $uni-font-size-base;
          font-weight: bolder;
          color: $uni-color-title;
        }
        .release-time {
          font-size: $uni-font-size-sm;
          color: $uni-text-color-grey;
        }
      }
    }

    .detail-right {
      display: flex;
      align-items: center;
    }
  }
}
</style>
